import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

// 导入乾坤函数
import {
  registerMicroApps,
  setDefaultMountApp,
  start
} from "qiankun";

Vue.config.productionTip = false

// function genActiveRule(routerPrefix) {
//   return location => location.pathname.startsWith(routerPrefix);
// }

// function genActiveRule(routerPrefix) {
//   return location => location.hash.startsWith(routerPrefix);
// }

let app = null;

function render({ appContent, loading }) {
  if (!app) {
    app = new Vue({
      router,
      store,
      render: h => h(App),
    }).$mount('#app');
    
  } else {
    store.commit('microApp/changeCenter', appContent);
    store.commit('microApp/changeLoading', loading);
  }

}

 //第一次调用初始主应用
render({}) 

let msg = {
  data:'主应用需要传递给微应用的数据'
}

let basicsmsg = {
  data:'基础微应用的数据'
}

let apps = [
  {
    name: 'main', // 微应用的名称，微应用之间必须确保唯一
    entry: 'http://localhost:9001', 
    container:'#subView', 
    activeRule: '/main',  // genActiveRule('/main'),
    props:msg
  },
  {
    name: 'basics', 
    entry: 'http://localhost:9002', 
    container:'#subView', 
    activeRule: '/basics',  // genActiveRule('/basics'),
    props: basicsmsg
  }
]


   //注册的子应用 参数为数组
registerMicroApps(apps,{
  beforeLoad: [
    app => {
      console.log(app)
      console.log('[LifeCycle] before load %c%s', 'color: green;', app.name);
    },
  ],
  beforeMount: [
    app => {
      console.log('[LifeCycle] before mount %c%s', 'color: green;', app.name);
    },
  ],
  afterUnmount: [
    app => {
      console.log('[LifeCycle] after unmount %c%s', 'color: green;', app.name);
    },
  ],
});


setDefaultMountApp('/main/home') //设置默认主页

start({
   sandbox :{strictStyleIsolation: true}
})



